<template>
  <div class="classdetails">
    <div class="head">
      <mt-header :title="title">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="content">
      <div class="imgs">
        <img src="../assets/classdetail_02.png" alt />
      </div>
      <div class="con">
        <h2>班主任带班能力快速提升研讨班</h2>
        <p>
          <span class="spn">
            <img src="../assets/Field-time@2x.png" alt />
          </span>
          <span>培训时间：2019-9-25 ~ 2019-12-25 （90天）</span>
        </p>
        <p>
            <span class="spn"><img src="../assets/loca_03.png" alt=""></span>
            <span>郑州市</span>
        </p>
        <p>
            <span class="spn"><img src="../assets/copy3.png" alt=""></span>
            <span>培训形式：观摩学习，集中面授</span>
        </p>
      </div>
      <div class="price">
          ￥<span>290元/人</span>
      </div>
      <div class="tab_type">
          <span class="active">项目介绍</span>
          <span>日程安排</span>
          <span>服务保障</span>
      </div>
      <div class="tab_con">
          <p>成班要求：60 ~ 90人 已报名人数 <span class="reco">0</span>/90</p>
          <p class="p2">知名专家全方位安全指导：系统性理论学习，针对性的案例分析和讨论，仿真性实践，从而有效提高中小学校园安全管理能力、应急能力。</p>
      </div>
      <div class="btn">
          <span>个人报名</span>
          <span>集体报名</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "classdetails",
  data() {
    return {
      title: "班级详情"
    };
  }
};
</script>

<style lang="less" scoped>
@family:AlibabaPuHuiTiR;
.classdetails {
  width: 100%;
  font-size: 0;
  background: #f8f8f8;
    position: relative;
  .mint-header {
    background-color: #fff;
    color: rgb(49, 49, 49);
    font-family: AdobeHeitiStd-Regular;
    font-size: 0.3rem;
    height: 1rem;
  }
  .content {
    width: 100%;
    background-color: #fff;
    .imgs {
      width: 100%;
      height: 4.08rem;
      img {
        width: 100%;
      }
    }
    .con{
        padding: 0.35rem 0.2rem 0.8rem;
        box-sizing: border-box;
        h2{
            font-size: 0.36rem;
            font-family: @family;
            color:rgb(49, 49, 49);
            font-weight: 400;
            letter-spacing: 1px;
            margin-bottom: 0.3rem;
        }
        p{
            font-size: 0.24rem;
            font-family: @family;
            color:rgb(115,116,119);
            line-height: 0.35rem;  
            span{
                display: inline-block;
               &.spn{
                   width: 0.27rem;
                   height: 0.3rem;
                   margin-right:0.15rem;
                   img{
                       width: 100%;
                   }
               }
            }  
        }
    }
    .price{
        color: #333;
        font-size: 0.2rem;
        padding-left: 0.2rem;
        box-sizing: border-box;
        margin-bottom: 0.8rem;
        span{
            font-size: 0.5rem;
        }
    }
    .tab_type{
         font-size: 0.32rem;
        font-family: @family;
        color:rgb(115,116,119);
        border-bottom: 1px solid #e5e5e5;
        padding-left: 0.2rem;
        box-sizing: border-box;
        span{
            display: inline-block;
            margin-right:0.75rem;
           &.active{
                color:rgb(231,16,16);
                border-bottom: 2px solid rgb(231,16,16);
                padding-bottom: 0.3rem;
                  box-sizing: border-box;
           }
        }
    }
    .tab_con{
        padding: 0.3rem 0.2rem 0.5rem;
        box-sizing: border-box;
        color:rgb(126,127,130);
         font-family: @family;
         font-size: 0.26rem;
         .p2{
             margin-top:0.4rem;
         }
    }
    .btn{
        width: 100%;
        height:0.9rem ;
        line-height: 0.9rem;
        // position: absolute;
        // bottom:0;
        // left:0;
        
        span{
            display: inline-block;
            width: 50%;
             font-family: @family;
             font-size: 0.3rem;
             text-align: center;
             &:nth-child(1){
                 background-color: rgb(237,165,26);
                 color:#fff;
             }
              &:nth-child(2){
                 background-color: #ed1a21;
                 color:#fff;
             }
        }
    }
  }
}
</style>